<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存移库</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        h3 a {
            text-decoration: none;
            color: black;
        }

        .cell {
            text-align: center;
        }

        .is-leaf {
            color: rgb(111, 174, 217);
        }

    </style>
</head>
<body>
<h3>
    <a href="">出入库管理</a>
</h3>
<div id="app">
    <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="出\入库单号">
            <el-input v-model="idNo" autocomplete="off" @change="idNoChange(idNo)"></el-input>
        </el-form-item>
        <el-form-item label="批次">
            <el-input v-model="batch" autocomplete="off" @change="batchChange(batch)"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="find">查询</el-button>
        </el-form-item>
    </el-form>


    <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item>
            <el-button type="primary" icon="el-icon-printer" @click="enter">入库操作</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-printer" @click="move">出库操作</el-button>
        </el-form-item>
    </el-form>



    <el-dialog :visible.sync="dialogEnterVisible" width="1500px" @close="closeDialog">
        <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-form-item label="入库类型" >
                <el-select v-model="ioWarehouse.idType"
                           placeholder="请选择入库类型">
                    <el-option
                            v-for="type in types"
                            :key="type.value"
                            :label="type.label"
                            :value="type.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次" >
                <el-input v-model="ioWarehouse.batch" autocomplete="off"></el-input>
            </el-form-item>

            <el-table
                    :data="productHandovers"
                    style="width: 100%"
                    :border="border"
                    router-view v-if="isRouterAlive">
                <el-table-column label="入库单号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.order2.orderId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" >{{ scope.row.commodity.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品数量">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库仓库">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.blankMenu"
                                   clearable placeholder="请选择仓库"
                                   @change="menuChange(scope.row,scope.row.blankMenu)"
                                   @clear="menuClear(scope.row)">
                            <el-option
                                    :key="scope.row.tmenu.wareNo"
                                    :label="scope.row.tmenu.wareName"
                                    :value="scope.row.tmenu.wareNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="入库库区">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.blankWarehouse"
                                   clearable placeholder="请选择库区"
                                   @change="wareChange(scope.row,scope.row.blankWarehouse)"
                                   @clear="wareClear(scope.row)">
                            <el-option
                                    v-for="warehouse in scope.row.warehouseBlank"
                                    :key="warehouse.goodsNo"
                                    :label="warehouse.goodsName"
                                    :value="warehouse.goodsNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="入库货架">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.blankShelve"
                                   clearable placeholder="请选择货架"
                                   @change="shelveChange(scope.row,scope.row.blankShelve)"
                                   @clear="shelveClear(scope.row)">
                            <el-option
                                    v-for="shelveBlank in scope.row.shelveBlank"
                                    :key="shelveBlank.shelvesNo"
                                    :label="shelveBlank.shelvesNo"
                                    :value="shelveBlank.shelvesNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="入库货位">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.blankCargo"
                                   clearable placeholder="请选择货位">
                            <el-option
                                    v-for="cargoBlank in scope.row.cargoBlank"
                                    :key="cargoBlank.cargoNo"
                                    :label="cargoBlank.cargoNo"
                                    :value="cargoBlank.cargoNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="确认">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="confirmAll(scope.row)">确认<i class="el-icon-upload el-icon--right"></i></el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-form>
    </el-dialog>


    <el-dialog :visible.sync="dialogShowVisible" width="1000px" @close="">
        <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-form-item label="出入库单号：" label-width="120px">
                {{iomNo}}
            </el-form-item>
        </el-form>
        <el-table
                :data="iomWarehouses"
                style="width: 100%"
                :border="border">
            <el-table-column label="序号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品码">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomGoodsno }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.iomGoods }}</span>
                </template>
            </el-table-column>
            <el-table-column label="仓库名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" name="price">{{ scope.row.iomName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="入库区域">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" name="price">{{ scope.row.iomArea }}</span>
                </template>
            </el-table-column>
            <el-table-column label="入库货架">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" name="price">{{ scope.row.iomShelves }}</span>
                </template>
            </el-table-column>
            <el-table-column label="入库货位">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" name="price">{{ scope.row.iomCargoloca }}</span>
                </template>
            </el-table-column>
            <el-table-column label="出\入库时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" name="price">{{ scope.row.iomTime }}</span>
                </template>
            </el-table-column>

        </el-table>

    </el-dialog>


    <el-dialog :visible.sync="dialogMoveVisible" width="500px" @close="closeDialog">
        <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-form-item label="出库单号" label-width="120px">
                <el-input v-model="ioWarehouse.idNo" autocomplete="off" @input="findIom(ioWarehouse.idNo)"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="出库类型" label-width="120px">
                <el-select v-model="ioWarehouse.idType"
                           placeholder="请选择出库类型">
                    <el-option
                            v-for="type in typess"
                            :key="type.value"
                            :label="type.label"
                            :value="type.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <br>
            <el-form-item label="批次" label-width="120px">
                <el-input v-model="ioWarehouse.batch" autocomplete="off"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="产品名称" label-width="120px">
                <el-select v-model="ioWarehouse.pname"
                           placeholder="请选择出库产品">
                    <el-option
                            v-for="item in iomWarehouse"
                            :label="item.iomGoods"
                            :value="item.iomGoods">
                    </el-option>
                </el-select>
            </el-form-item>
            <br>

            <el-form-item label="出库数量" label-width="120px">
                <el-input v-model="ioWarehouse.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="仓库" label-width="120px">
                <el-select v-model="ioWarehouse.wname"
                           clearable placeholder="请选择仓库">
                    <el-option
                            v-for="menu in menus"
                            :key="menu.wareName"
                            :label="menu.wareName"
                            :value="menu.wareName">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>



    <el-table
            :data="ioWarehouses"
            style="width: 100%"
            :border="border">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="出\入库单号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.idNo }}</span>
            </template>
        </el-table-column>
        <el-table-column label="出\入库类型">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.idType }}</span>
            </template>
        </el-table-column>
        <el-table-column label="批次">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.batch }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品数量">
            <template slot-scope="scope">
                <span style="margin-left: 10px" name="price">{{ scope.row.pnum }}</span>
            </template>
        </el-table-column>
        <el-table-column label="仓库名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px" name="price">{{ scope.row.wname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="出\入库时间">
            <template slot-scope="scope">
                <span style="margin-left: 10px" name="price">{{ scope.row.ioTime }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-s-grid" @click="show(scope.row.idNo)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="page_size"
                       :page-size="4"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count"
                       :background="back">
        </el-pagination>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 当前页数
                currentPage: 1,
                // 发货订单总数
                count: 0,
                // 每页的数据
                page_size: [5, 10],
                // 当前每页的数据
                pageSize: 5,
                // 分页背景
                back: true,
                // 表格边框
                border: true,

                // 所有出入库信息
                ioWarehouses: [],
                ioWarehouse: {},

                //所有交接表信息
                productHandovers:[],

                //当前行的货架
                warehouses:[],

                //出入库详情
                iomWarehouses:[],
                iomWarehouse:[],
                //出入库单号
                iomNo:"",

                //仓库集合
                menus:[],

                //动态sql
                idNo: null,
                batch: null,

                // 移库操作模态框
                dialogEnterVisible: false,
                dialogShowVisible: false,
                dialogMoveVisible: false,

                //解决数据不能及时刷新的问题
                isRouterAlive:true,

                //入库类型
                types:[{
                    value: '原料入库',
                    label: '原料入库'
                }, {
                    value: '订单入库',
                    label: '订单入库'
                }],
                //出库类型
                typess:[{
                    value: '原料出库',
                    label: '原料出库'
                }, {
                    value: '订单出库',
                    label: '订单出库'
                }],
            }
        },
        provide(){
            return {
                reload:this.reload
            }
        },
        methods: {
            //数据不能及时刷新
            reload(){
                this.isRouterAlive=false;
                this.$nextTick(()=>{
                    this.isRouterAlive=true;
                })
            },

            menuClear(row){
                this.$set(row,"blankWarehouse","");
                this.$set(row,"blankShelve","");
                this.$set(row,"blankCargo","");
                row.warehouseBlank = [];
                row.shelveBlank = [];
                row.cargoBlank = [];
            },
            menuChange(row,val) {
                if (val != ""){
                    axios.get("/menu/"+val)
                        .then(res =>{

                            axios.get("/warehouses/" + res.data.id)
                                .then(res =>{
                                    row.warehouseBlank = res.data;
                                    this.reload();
                                })
                        })
                }
            },

            wareClear(row){
                this.$set(row,"blankShelve","");
                row.shelveBlank = [];
            },
            wareChange(row,val) {
                if (val != ""){
                    this.$set(row,"blankShelve","");
                    row.shelveBlank = [];
                    axios.get("/shelve/" + val)
                        .then(res =>{
                            row.shelveBlank = res.data;
                            this.reload();
                        })
                }
            },

            shelveClear(row){
                this.$set(row,"blankCargo","");
                row.cargoBlank = [];
            },
            shelveChange(row,val){
                if (val != ""){
                    this.$set(row,"blankCargo","");
                    row.cargoBlank = [];
                    axios.get("/cargos/" + val)
                        .then(res =>{
                            row.cargoBlank = res.data;
                            this.reload();
                        })
                }
            },

            //确认
            confirmAll(row){
                // if (!this.ioWarehouse.idNo){
                //
                //     this.$message({
                //         //默认类型为info
                //         type : "info",
                //         message : "请填写入库单号"
                //     });
                //     return;
                // }
                if (!this.ioWarehouse.idType){

                    this.$message("请填写入库类型");
                    return;
                }
                if (!this.ioWarehouse.batch){

                    this.$message("请填写入库单号");
                    return;
                }
                if (!row.blankMenu){
                    this.$message("未选择仓库");
                    return;
                }
                if (!row.blankWarehouse){
                    this.$message("未选择库区");
                    return;
                }
                if (!row.blankShelve){
                    this.$message("未选择货架");
                    return;
                }
                if (!row.blankCargo){
                    this.$message("未选择货位");
                    return;
                }
                this.ioWarehouse.pname = row.commodity.pname;
                this.ioWarehouse.pnum = row.num;
                this.ioWarehouse.wname = row.blankMenu;
                this.ioWarehouse.idNo = row.order2.orderId;
                //设置为入库
                this.ioWarehouse.ioFlag = 1;
                console.log(row);
                console.log(this.ioWarehouse);

                axios.post("/ioWarehouse/"+row.blankCargo,this.ioWarehouse)
                    .then(res => {
                        if (res.data == "ok"){
                            axios.put("/ProductHandover/"+row.id+"/"+row.order2Id)
                                .then(res=>{
                                    if(res.data === "ok"){
                                        this.enter();
                                        this.$message("确认成功!");
                                    }
                                });
                        }

                    })

            },

            //出库提交
            save(){
                this.ioWarehouse.ioFlag = 0;
                console.log(this.ioWarehouse);
                axios.post("/ioWarehouse",this.ioWarehouse)
                    .then(res => {
                        if (res.data == "ok"){
                            this.$message("出库成功!");
                        }

                    })
            },


            idNoChange(val) {
                if (val == "") {
                    this.idNo = null;
                } else {
                    this.idNo = val;
                }
            },
            batchChange(val) {
                if (val == "") {
                    this.batch = null;
                } else {
                    this.batch = val;
                }
            },
            find() {
                this.loadIoWarehouses();
            },
            findIom(val){
                console.log(val);
                this.iomWarehouse = [];
                this.$set(this.ioWarehouse,"pname","");
                this.$set(this.ioWarehouse,"wname","");
                if (val == ""){
                    return;
                }
                axios.get("/iomWarehouse/1/"+ val)
                    .then(res =>{
                        this.iomWarehouse = res.data;
                        console.log(this.iomWarehouse);
                    })
            },

            //页面加载所有的出入库信息
            loadIoWarehouses() {
                axios.get("/ioWarehouses/" + this.currentPage + "/" + this.pageSize + "?idNo=" + this.idNo + "&&batch=" + this.batch)
                    .then(res => {
                        this.ioWarehouses = res.data.data;
                        this.count = res.data.count;
                    });
            },
            // 入库操作
            enter() {
                axios.get("/productHandoverss")
                    .then(res =>{
                        this.productHandovers = res.data;
                    });
                this.dialogEnterVisible = true;
            },

            //移库操作
            move() {
                axios.get("/menus")
                    .then(res => {
                        this.menus = res.data;
                    });
                this.dialogMoveVisible = true;
            },

            show(val){
                this.iomNo = val;
                this.dialogShowVisible = true;
                axios.get("/iomWarehouse/"+ val)
                    .then(res =>{
                        this.iomWarehouses = res.data;
                    })
            },


            // 关闭模态框触发事件
            closeDialog() {
                this.ioWarehouse = [];
                this.iomWarehouse = [];
                this.loadIoWarehouses();
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.loadIoWarehouses();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadIoWarehouses();
            },
            handleEdit(index, row) {
                this.cargo = row;
                this.flag = 1;
                this.dialogFormVisible = true;
            },
        },
        mounted() {
            this.loadIoWarehouses();
        }
    });
</script>
</html>